<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>简况F10</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">	
			p {margin:0px;}					
			ul {margin:5px;}			
			h4 {margin:0px}	
			.fixedBox{
				border: 3px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}	
			#f1{
				color: #FFD700;
				margin-left:-5px;		
			}			
			#f2{
				color: #FFFFE0;
			}
			#f3{
				color: #00FFFF;
				margin-left:-5px;
			}
			#f4{
				color: #7FFF00;				
				margin-left:-5px;				
			}
			#f5{
				color: #F0E68C;				
				margin-left:0px;				
			}
			#f6{
				color: #FFDEAD;				
				margin-left:-5px;				
			}
			#t1{
				color: #7FFF00;				
				margin:5px 0px 0px 3px;
				
				font-size:16px;
			}			
			#t2{
				color: #FFFF00;								
				font-size:14px;
			}
			.comRed{
				color: #FF8C00;
			}
			.comGreen{
				color: #7FFF00;
			}
			
			.dorg label{
				color: #FF0000;
			}
			
			.org label{
				color: #FF0000;
			}
			
			
			#box {
				position: absolute;
				top: 100px;
				left: 300px;
				width: 500px;
				height: 300px;
				padding: 5px;
				border: #00cdcd 2px solid;
				box-sizing: border-box;
				background-color: #000;
				display: none;
			}
			#bar {
				padding-left:5px; 
				height: 30px;
				line-height: 30px;				
				background-color: #DC143C;
				cursor: move;
			}
			
			#content { 
				width: 98%;
				height: calc(100% - 40px);
				background-color: #eee;
			}
		</style>
	</head>
	<body id="body">
		<div id="towriter" class="fixedBox" style="display:none;border: #fff 2px solid;">
			<div id="towrite1" class="fixedBox"></div>	
			<div id="towrite2" class="fixedBox"></div>
			<div id="box" style="background:#fff;">
				<div id="bar"></div>
				<div id="content">
					<iframe id="mapIframe" ></iframe>
				</div>
			</div>
		</div>	
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			window.onload = function() {
				getSource();
				changeStyle();
			}					
			
			function changeStyle() {
				var div = document.getElementById("towriter");
				div.style.display= "block";				
				div.style.left = "0px"; 				
				div.style.width = "100%";	
				div.style.border= "0px solid #555";
				
				var obj1 = document.getElementById("towrite1");	
				obj1.style.display= "block";
				obj1.style.left = "0px"; 				
				obj1.style.width = "98%";
				obj1.style.height = "25px";				
				obj1.style.fontSize ="14px";		
				obj1.style.border= "1px solid #555";
				
				var obj2 = document.getElementById("towrite2");
				obj2.style.display= "block";
				obj2.style.top = "40px";
				obj2.style.left = "0px"; 				
				obj2.style.width = "98%";	
				obj2.style.height = "90%";	
				obj2.style.fontSize ="14px";
				//obj2.style.border= "5px solid #696969";	
				
				var iframe = document.getElementById("mapIframe");
				iframe.style.margin = "-10px 0px 3px -10px";
				iframe.style.width = "100%";
				iframe.style.height = "98%";
				iframe.style.background="#fff";
			}
			
			
			<!-- $(function() { -->
				<!-- setInterval(function() { -->
					<!-- getSource(); -->
				<!-- }, -->
				<!-- 500); -->
			<!-- }) -->
			
			var z = 1;
			$(function() {
				setInterval(function() {
					if(z == 1){					
						getSource();										
					}					
				},
				500);
			})
			
			function changeCss(obj){	
				var alist = document.getElementById("gn").getElementsByTagName("a");					
				for(var i = 0; i < alist.length; i++){									
					alist[i].style.color = "#FFDEAD"; //给所有a标签赋原色
				}
				if(obj.id != "gpdm"){
					obj.style.color = "#FFFF00"; //令当前标签高亮
				}				
			}
			
			function changeCsst(obj){	
				var alist = document.getElementById("flbt").getElementsByTagName("a");					
				for(var i = 0; i < alist.length; i++){									
					alist[i].style.color = "#E1FFFF"; //给所有a标签赋原色
				}
				obj.style.color = "#00FFFF"; //令当前标签高亮				
			}
			
			function updatex() {
				aObj = document.getElementById('sx');
				if(aObj.innerText == "停止刷新"){
					z = 0;
					aObj.innerText = "自动刷新";
					aObj.style.color = "#ADFF2F";
				}else if(aObj.innerText == "自动刷新"){
					z = 1;
					aObj.innerText = "停止刷新";
					aObj.style.color = "#E1FFFF";					
				}
			}
						
			function updated() {
				z = 0;			
				aObj = document.getElementById('sx');
				if(aObj.innerText == "停止刷新"){					
					aObj.innerText = "自动刷新";
					aObj.style.color = "#ADFF2F";
				}					
			}
			
			function updateb() {
				z = 1;			
				aObj = document.getElementById('sx');
				if(aObj.innerText == "自动刷新"){					
					aObj.innerText = "停止刷新";
					aObj.style.color = "#E1FFFF";
				}					
			}
			
			function keepTwoDecimal(num) {  
               var result = parseFloat(num);  
               if (isNaN(result)) {  
                   return false;  
               }  
               result = Math.round(num * 100) / 100;  
               return result;  
			};		
			
			function NumberTransform(num) { 
				var result = parseFloat(num);
				if (isNaN(result)) {                    
                   return false;  
               }  				
               if(Math.abs(result) > 100000000){
				result = result / 100000000;
				result = result.toFixed(2) + "亿";
			   }else if(Math.abs(result) > 10000){
			    result = result/10000;
				result = result.toFixed(0) + "万";
			   }
               return result;  
			};
			
			//获取元素的纵坐标 
			function getTop(e){ 
				var offset=e.offsetTop; 
				if(e.offsetParent!=null) offset+=getTop(e.offsetParent);				
				return offset; 
			} 
			
			function rolling(id){			
				var e = document.getElementsByClassName(id)[0];
				var y = getTop(e);  //纵坐标 
				//alert(y)
				$("#towrite2").scrollTop(y-55);
			}
			
			var gpdm = "";
			var gpmc = "";
			var dm ="";			
			function getSource() {								
				var u = decodeURI(window.location.href);								
				if(u.indexOf("##") > -1){
					var gp = u.split('##');				
					dm = gp[1];
					gpmc = gp[2];															
				}else{
					dm = "600000";
					gpmc = "浦发银行";					
				}
				if(dm != gpdm){
					gpdm = dm;
					var sc = "";
					if(gpdm.substr(0 , 1) == "6"){
						sc = "17";
					}else{	
						sc = "33";
					}		
					var div1 = document.getElementById('towrite1');
					var sx = "<a style='float:right; padding-right:30px;color:#E1FFFF;font-size:14px;'  href='javascript:void(0)' id='sx' onclick='updatex()'>停止刷新</a>";														
					var gx = "<a style='color:#fff;' id='gpdm' href='http://www.treeid/code_" + gpdm + "' onclick='updateb();changeCss(this);'>" + gpmc + "</a>";															
										
					var gk = "<a href='javascript:void(0)' style='color:#E1FFFF;' onclick='rolling(\"gsgk\");changeCsst(this);'>公司概况</a>"; 
					var zxzb = "<a href='javascript:void(0)' style='color:#E1FFFF;' onclick='rolling(\"fins\");changeCsst(this);'>最新指标</a>";
					var gntc = "<a href='javascript:void(0)' style='color:#E1FFFF;' onclick='rolling(\"gn\");changeCsst(this);'>概念题材</a>";
					var dstx = "<a href='javascript:void(0)' style='color:#E1FFFF;' onclick='rolling(\"tx\");changeCsst(this);'>大事提醒</a>";
					var scgd = "<a href='javascript:void(0)' style='color:#E1FFFF;' onclick='rolling(\"scgd\");changeCsst(this);'>市场观点</a>";
					//var flbt = "<p id='flbt' style='margin-left:10px;'>" + gk + zxzb + gntc + dstx + scgd + "</p>";	
					var flbt = gk + zxzb + gntc + dstx + scgd;						
					div1.innerHTML = "<font size='3' style=color:#FFFF00;>简况F10" + sx + "<font size='2' color=#fff>&nbsp;&nbsp;&nbsp;&nbsp;" + gpdm + "&nbsp;&nbsp;" + gx + flbt +"</font></font>";
										
					var url1 = "https://basic.10jqka.com.cn/basicapi/company_info/merge_info/v1/base_info/?code=" + gpdm + "&market=33&type=stock";					
					var res1 = [];
					$.ajax({
						type: "get",
						url: url1,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {							
							res1 = data.data;
						}
					});
					var div2 = document.getElementById('towrite2');
					div2.innerHTML = "<p id=t1 class='gsgk'>公司概况：</p>";					

					gsgk = "<p style='margin-left:10px;'><span id=f1>公司亮点：</span><span id=f2>" + res1.describe + "</span></p>";					
					gsgk += "<p style='margin-left:10px;'><span id=f1>公司主营：</span><span id=f2>" + res1.base_business + "</span></p>";					
					gsgk += "<p style='margin-left:10px;'><span id=f1>所属行业：</span><span id=f2>" + res1.industry.hy + "-" + res1.industry.hy2 + "-" + res1.industry.hy3 + "</span></p>";					
					gsgk += "<p style='margin-left:10px;'><span id=f1>所属地域：</span><span id=f2>" + res1.area.province + "</span></p>";
					if(res1.management.holder_controller != ""){					
						gsgk += "<p style='margin-left:10px;'><span id=f1>控股股东：</span><span id=f2>" + res1.management.holder_controller[0].name + "（持股" + res1.management.holder_controller[0].rate + "%）</span></p>";
					}
					if(res1.management.actual_controller != ""){
						var skr = "";
						var aa = res1.management.actual_controller;
						for(var j = 0; j < aa.length; j++){							
							skr += aa[j].name + "（持股" + aa[j].rate + "%）、";
						}
						gsgk += "<p style='margin-left:10px;'><span id=f1>实际控制人：</span><span id=f2>" + skr.substr(0,skr.length-1) + "</span></p>";
					}
					if(res1.management.final_controller != ""){
						var zkr = "";
						var aa = res1.management.final_controller;
						for(var j = 0; j < aa.length; j++){							
							zkr += aa[j].name + "（持股" + aa[j].rate + "%）、";
						}
						gsgk += "<p style='margin-left:10px;'><span id=f1>最终控制人：</span><span id=f2>"  + zkr.substr(0,zkr.length-1) + "</span></p>";
					}
					gsgk += "<p style='margin-left:10px;'><span id=f1>最赚钱业务：</span><span id=f2>" + res1.profitable_business.name + "（利润比例" + res1.profitable_business.profit_rate + "%）</span></p>";
					var newdiv1 = document.createElement('div');
					newdiv1.id = "gsgk";
					newdiv1.style.display = "block";  //默认显示block；不显示：none;
					newdiv1.style.width= "92%";	
					newdiv1.style.marginLeft= "5px";
					newdiv1.style.border= "2px solid #A9A9A9";	
					div2.appendChild(newdiv1);
					
					newdiv1.innerHTML = gsgk;
					
					var url2 = "https://basic.10jqka.com.cn/basicapi/finance/stock/maintable/index_merge/?code=" + gpdm;
					var res2 = [];
					$.ajax({
						type: "get",
						url: url2,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {							
							res2 = data.data;
						}
					});

					div2.innerHTML += "<p id=t1 class='fins'>最新指标：</p>";
					var yjyg = "";
					if(res2.release_status!=null){					
						yjyg = "<p style='margin-left:10px;'><span id=f1>业绩预告：</span><span id=f2>" + res2.release_status.report_name + "</span></p>";					
						yjyg += "<p style='margin-left:5px;'><span id=f2>" + res2.release_status.title + "</span></p>";					
						if(res2.release_status.content != null){
							yjyg += "<p style='margin-left:5px;'><span id=f5>" + res2.release_status.content.replace(/\n　　/g,"<br>") + "</span></p>";	
						}
					}
					var arr2 = res2.main_table.index_list;
					//alert(JSON.stringify(arr2))
					var fins = "<p id=f4 style='margin:5px 0px 0px 5px;'>财务指标：<span style='color:#fff;font-size:12px;'>（" + res2.main_table.report_data.report + "）</span></p>";
					var k = 0;
					for(var i = 2; i < arr2.length; i++){
						if(k == 0 || k%4 == 0){  //i%2  每行显示财务指标数
							fins += "<p>";
						}
						k++;
						var name = arr2[i].index_name;
						var val = arr2[i].value;
						if(val != null){
							if(name.indexOf("率") > -1 || name.indexOf("比") > -1){
								val = keepTwoDecimal(val) + "%";
							}else if(name.indexOf("每股") > -1){
								val = Number(val).toFixed(3) + "元";
							}else if(name.indexOf("收入") > -1 || name.indexOf("利润") > -1){
								val = NumberTransform(val);						
							}
						}else{
							val = "  ";
						}
						fins += "<span style='margin-left:5px;' id=f1>" + arr2[i].index_name +"：</span><span id=f2 style='margin-right:20px;'>" + val + "</span>";
					}
										
					var newdiv2 = document.createElement('div');
					newdiv2.id = "fins";
					newdiv2.style.display = "block";  //默认显示block；不显示：none;
					newdiv2.style.width= "92%";	
					newdiv2.style.marginLeft= "5px";
					newdiv2.style.border= "2px solid #A9A9A9";	
					div2.appendChild(newdiv2);
					newdiv2.innerHTML = yjyg + fins;

					div2.innerHTML += "<p id=t1 class='gn'>概念题材：</p>";
					var url3 = "https://basic.10jqka.com.cn/basicapi/concept/stock_concept_list/?code=" + gpdm;
					var res3 = [];
					$.ajax({
						type: "get",
						url: url3,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {							
							res3 = data.data;
						}
					});
					var gn = "";
					for(var i = 0; i < res3.length; i++){
						gn += "<p style='margin:10px 0px 0px 10px;'><span id=f3>" + res3[i].concept_name + "</span></p>";
						gn += "<p style='margin-left:10px;'><span id=f2>" + res3[i].concept_explain + "</span></p>";
						var aa = res3[i].leader;
						if(aa != ""){
							gn += "<p style='margin-left:10px;'><span id=f5>概念龙头：</span></p>";
							var lts = "";
							
							for(var j = 0; j < aa.length; j++){	
								var code = aa[j].code;
								var name = aa[j].name;
								//lts += "<span id=f1 style='margin-right:15px;'>" + name + "</span>";
								var jx = "<a style='color:#FFDEAD;' href='http://www.treeid/code_" + code + "' onclick='changeCss(this);updated();'>" + name + "</a>";															
								lts += jx;
							}
							gn += "<p style='margin-left:10px;'>" + lts + "</p>";
						}
					}
					
					var newdiv3 = document.createElement('div');
					newdiv3.id = "gn";
					newdiv3.style.display = "block"; 
					newdiv3.style.width= "92%";	
					newdiv3.style.marginLeft= "5px";
					newdiv3.style.border= "2px solid #A9A9A9";	
					div2.appendChild(newdiv3);
					
					newdiv3.innerHTML = gn;
					
					div2.innerHTML += "<p id=t1 class='tx'>大事提醒：</p>";
					var url4 = "https://basic.10jqka.com.cn/mapp/" + gpdm + "/all/0/3/stock_event_remind.json";
					var res4 = [];
					$.ajax({
						type: "get",
						url: url4,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {	
						//alert(JSON.stringify(data))
							res4 = data.data;
						}
					});
					var tx = "";
					for(var i = 0; i < res4.length; i++){
						tx += "<p style='margin-left:5px;'><span style='margin-left:0px;' id=f5>" + res4[i].date + "</span><span style='margin-left:10px;' id=f1>" + res4[i].title + "</span></p>";
						tx += "<p style='margin:0px 0px 10px 5px;'><span id=f2>" + res4[i].content + "</span></p>";
						
					}
					var newdiv4 = document.createElement('div');
					newdiv4.id = "tx";
					newdiv4.style.display = "block"; 
					newdiv4.style.width= "92%";	
					newdiv4.style.marginLeft= "5px";
					newdiv4.style.border= "2px solid #A9A9A9";	
					div2.appendChild(newdiv4);
					
					newdiv4.innerHTML = tx;
					
					div2.innerHTML += "<p id=t1 class='scgd'>市场观点：</p>";
					var url5 = "https://basic.10jqka.com.cn/api/stockph/focusday.php?code=" + gpdm;
					var res5 = [];
					$.ajax({
						type: "get",
						url: url5,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {	
						//alert(JSON.stringify(data))
							res5 = data.data;
						}
					});
					
					var rqb = "<p style='margin-left:10px;'><span id=f3>人气榜：</span></p>";
					rqb += "<p style='margin-left:10px;'><span id=f2>" + res5.desc + "</span></p>";
					
					var url6 = "https://basic.10jqka.com.cn/api/stockph/research/" + gpdm + "/stock/";
					var res6 = [];
					$.ajax({
						type: "get",
						url: url6,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {	
						//alert(JSON.stringify(data))
							res6 = data.data;
						}
					});
					var cm = "";
					if(res6.user_action.chip_situation != null){
						cm += "<p style='margin:10px 0px 0px 10px;'><span id=f3>筹码情况：</span></p>";
						cm += "<p style='margin-left:10px;'><span id=f2>" + res6.user_action.chip_situation.desc + "</span></p>";
					}
					
					var jgdy = "";
					if(res6.research.data.month!=null){
						jgdy += "<p style='margin:10px 0px 0px 10px;'><span id=f3>机构关注趋势：</span></p>";
						jgdy += "<p style='margin-left:10px;'><span id=f2>" + res6.research.data.month.analysis + "</span></p>";
					}
				
					var url7 = "https://basic.10jqka.com.cn/basicapi/report/data/" + sc + "/" + gpdm + "/";
					var res7 = [];
					$.ajax({
						type: "get",
						url: url7,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {	
						//alert(JSON.stringify(data))
							if(data.data != null){
								res7 = data.data.count_data;
							}
						}
					});
					
					var pj = "";
					if(res7 != ""){
						pj += "<p style='margin:10px 0px 0px 10px;'><span id=f3>评级统计：</span></p>";						
						for(var i = 0; i < res7.length; i++){
							var aa = "<span id=f1 style='margin-left:5px;'>" + res7[i].title + "</span>";
							aa += "<span id=f5 style='margin-left:10px;'>买入：</span>" + res7[i].buy;
							aa += "<span id=f5 style='margin-left:10px;'>增持：</span>" + res7[i].over;
							aa += "<span id=f5 style='margin-left:10px;'>中性：</span>" + res7[i].neutral;
							aa += "<span id=f5 style='margin-left:10px;'>减持：</span>" + res7[i].reduce;
							aa += "<span id=f5 style='margin-left:10px;'>卖出：</span>" + res7[i].sell;
							pj += "<p style='margin-left:10px;'><span id=f2>" + aa + "</span></p>";
						}
					}
					
					var ybzy = "";
					if(res6.report != null){
						ybzy = "<p style='margin:10px 0px 0px 10px;'><span id=f3>研报摘要：</span></p>";						
						for(var i = 0; i < res6.report.report_list.length; i++){
							var cc = res6.report.report_list[i];
							var aa = "<span id=f1 style='margin-left:5px;'>" + cc[6] + "</span>";
							aa += "<span id=f5 style='margin-left:10px;'>" + cc[3] + "</span>";
							//aa += "<span id=f2 style='margin-left:10px;'>" + cc[2] + "</span>";	
							aa += "<a href='javascript:void(0);' id=f2 style='margin-left:10px;' onclick='changeCssy(this,\"scgd\");showInform(\"https:" + cc[0] + "\",\"" + cc[2] + "\");'>" + cc[2] + "</a>";						
							ybzy += "<p style='margin-left:10px;'>" + aa + "</p>";
						}
					}
					
					var newdiv5 = document.createElement('div');
					newdiv5.id = "scgd";
					newdiv5.style.display = "block"; 
					newdiv5.style.width= "92%";	
					newdiv5.style.marginLeft= "5px";
					newdiv5.style.border= "2px solid #A9A9A9";	
					div2.appendChild(newdiv5);
					
					newdiv5.innerHTML = rqb + cm + jgdy + pj + ybzy;
					
					
					var nDiv = document.createElement("div");
					nDiv.id = "box1";
					nDiv.style.display = "none";
					nDiv.style.position = "absolute";
					nDiv.style.left = "0px";
					nDiv.style.top = "0px";
					nDiv.style.width = "96%";
					nDiv.style.height = "100%";
					nDiv.style.background = "#fff";
					document.getElementById('towriter').appendChild(nDiv);
					
					var nDiv1 = document.createElement("div");
					nDiv1.id = "bar1";
					nDiv1.style.paddingLeft = "5px"; 
					nDiv1.style.lineHeight = "30px"; 
					nDiv1.style.background = "#DC143C"; 				
					nDiv.appendChild(nDiv1);
					
					var nDiv2 = document.createElement("div");
					nDiv2.id = "content1";
					nDiv2.style.paddingLeft = "5px";
					nDiv2.style.width = "98%";
					nDiv2.style.height = "calc(100% - 40px)";
					nDiv2.style.background = "#eee";				
					nDiv.appendChild(nDiv2);
					
					var iframe = document.createElement("iframe");
					iframe.id = "mapIframe1";
					iframe.style.paddingLeft = "5px";
					iframe.style.width = "100%";
					iframe.style.height = "98%";
					iframe.style.background="#fff";
					nDiv2.appendChild(iframe);
					
					div2.scrollTop = 0; //回到顶部
				}
			}
			
			function changeCssy(obj,id){
				var alist = document.getElementById(id).getElementsByTagName("a");					
				for(var i = 0; i < alist.length; i++){
					//if(alist[i].innerText != "弹出显示"){
						alist[i].style.color = "#FFFFE0"; //给所有a标签赋原色
					//}
				}
				obj.style.color = "#00FFFF"; //令当前标签高亮				
			}
			
			<!-- function update(id) {	 -->
					<!-- var div2 = document.getElementById(id);					 -->
					<!-- if(div2.style.display == "block"){ -->
						<!-- div2.style.display = "none"; -->
					<!-- }else{ -->
						<!-- div2.style.display = "block"; -->
					<!-- }					 												 -->
			<!-- }			 -->
		
			function showInform(url,ss){				
				var div = document.getElementById('box');
				div.style.display = 'block';
				div.style.fontSize = "12px";
				
				var div1 = document.getElementById('bar');							
				var gb = '<a href="javascript:close();" style="float:right; margin-top:-3px;color:#fff;font-size:26px;">×</a>';	
				var sf = '<a href="javascript:updatex(1);"  id="sf" style="float:right; margin-top:-3px;color:#fff;font-size:26px;">□</a>';				
				//div1.innerHTML = "<font style='color:#fff;'>" + xwbt +"</font>" + gb + sf;
				var bt = "<div style='position:absolute;width:80%;height:30px;overflow:hidden;color:#fff;'>" + ss + "</div>";
				div1.innerHTML = bt + gb + sf;
				
				var iframe = document.getElementById('mapIframe');
				iframe.src = url;
				
				var div2 = document.getElementById('bar1');
				var hy = '<a href="javascript:updatex(2);"  id="hy" style="position:relative;float:right; margin-top:-3px;color:#fff;font-size:26px;">○</a>';				
				bt = "<div style='float:left;width:80%;height:30px;overflow:hidden;color:#fff;'>" + ss + "</div>";				
				div2.innerHTML = "<div style='width:100%;height:30px;'>" + bt  + "<div style='float:right;width:70px;height:30px;'>" + gb + hy + "</div></div>";
				
				var iframe1 = document.getElementById('mapIframe1');
				iframe1.src = url;
			}
			
			
			function close() { 
				var div = document.getElementById("box");						
				div.style.display = "none";
				var div1 = document.getElementById("box1");						
				div1.style.display = "none";
			}
			
			function updatex(p) {
				var div = document.getElementById('box');
				var div1 = document.getElementById('box1');
				if(p == 1){
					div.style.display = "none";
					div1.style.display = "block";
				}else{
					div.style.display = "block";
					div1.style.display = "none";
				}				
			}
			
		</script>	
		<script>
		var dragBox = function (drag, wrap) {

			function getCss(ele, prop) {
				return parseInt(window.getComputedStyle(ele)[prop]);
			}

			var initX,
			initY,
			dragable = false,
			//wrapLeft = getCss(wrap, "left"),
			wrapTop = getCss(wrap, "top");
			removeEventListener
			drag.addEventListener("mousedown", function (e) {
				wrapLeft = getCss(wrap, "left"),  //获取box启动后坐标
				
				dragable = true;
				initX = e.clientX;
				initY = e.clientY;
			}, false); 
			
			document.addEventListener("mousemove", function (e) {		
				if (dragable === true ) {
					var nowX = e.clientX,
					nowY = e.clientY,
					disX = nowX - initX,
					disY = nowY - initY;
					wrap.style.left = wrapLeft + disX + "px";
					wrap.style.top = wrapTop + disY + "px";
				}
			});

			drag.addEventListener("mouseup", function (e) {
				dragable = false;
				wrapLeft = getCss(wrap, "left");
				wrapTop = getCss(wrap, "top");
				}, false); 
		};

		dragBox(document.querySelector("#bar"), document.querySelector("#box"));
		
    </script>
	<script>
		//需要调整尺寸的div
		let c = document.getElementById('box')
		// body监听移动事件
		document.getElementById('body').addEventListener('mousemove', move)
		// 鼠标按下事件
		c.addEventListener('mousedown', down)
		// 鼠标松开事件
		document.getElementById('body').addEventListener('mouseup', up)

		// 是否开启尺寸修改
		let resizeable = false
		// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
		let clientX, clientY
		// div可修改的最小宽高
		let minW = 8, minH = 8
		// 鼠标按下时的位置，使用n、s、w、e表示
		let direc = ''

		// 鼠标松开时结束尺寸修改
		function up() {
			resizeable = false
			dragBox(document.querySelector("#bar"), document.querySelector("#box"));			
		}

		// 鼠标按下时开启尺寸修改
		function down(e) {
			let d = getDirection(e)
			// 当位置为四个边和四个角时才开启尺寸修改
			if (d !== '') {
				resizeable = true
				direc = d
				clientX = e.clientX
				clientY = e.clientY
			}
		}

		// 鼠标移动事件
		function move(e) {			
			let d = getDirection(e)
			let cursor
			if (d === '') cursor = 'default';
			else cursor = d + '-resize';
			// 修改鼠标显示效果
			c.style.cursor = cursor;
			// 当开启尺寸修改时，鼠标移动会修改div尺寸
			if (resizeable) {
				// 鼠标按下的位置在右边，修改宽度
				if (direc.indexOf('e') !== -1) {
					c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
					clientX = e.clientX
				}

				// 鼠标按下的位置在上部，修改高度
				if (direc.indexOf('n') !== -1) {
					c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
					c.style.top = c.offsetTop + (e.clientY - clientY) + "px";
					clientY = e.clientY
				}
				// 鼠标按下的位置在底部，修改高度
				if (direc.indexOf('s') !== -1) {
					c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
					clientY = e.clientY
				}

				// 鼠标按下的位置在左边，修改宽度
				if (direc.indexOf('w') !== -1) {
					c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
					//clientX = e.clientX
					c.style.left = c.offsetLeft + (e.clientX - clientX) + "px";
					clientX = e.clientX
				}

			}
		}

		// 获取鼠标所在div的位置
		function getDirection(ev) {
			let xP, yP, offset, dir;
			dir = '';

			xP = ev.offsetX;
			yP = ev.offsetY;
			offset = 10;

			if (yP < offset) dir += 'n';
			else if (yP > c.offsetHeight - offset) dir += 's';
			if (xP < offset) dir += 'w';
			else if (xP > c.offsetWidth - offset) dir += 'e';

			return dir;
		}
	</script>
		
	</body>
</html>